<template>
    <el-card shadow="never" style="width: 450px; min-height: 700px;">
        <Header :data="data" :title="data.manufacturers + '-' + data.series + '-' + data.code_name" />
        <div class="main">
            <p class="title">详细参数</p>
            <el-descriptions class="margin-top" :column="1" size="default" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            CPU厂商
                        </div>
                    </template>
                    {{ data.manufacturers }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            CPU系列
                        </div>
                    </template>
                    {{ data.series }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            制作工艺
                        </div>
                    </template>
                    {{ data.pro_tech }} 纳米
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            CPU主频
                        </div>
                    </template>
                    {{ data.clock_speed }} GHz
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            CPU核心
                        </div>
                    </template>
                    {{ data.cores }} 核心
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            CPU线程
                        </div>
                    </template>
                    {{ data.threads }} 线程
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            二级缓存
                        </div>
                    </template>
                    {{ data.L2 }} MB
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            三级缓存
                        </div>
                    </template>
                    {{ data.L3 }} MB
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            插槽类型
                        </div>
                    </template>
                    {{ data.socket_type }}
                </el-descriptions-item>

            </el-descriptions>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import Header from './Header.vue';


import { defineProps } from 'vue';

const { data } = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})





</script>

<style scoped lang="scss">
.main {

    .title {
        font-weight: bold;
        font-size: 16px;
    }


    .cell-item {
        font-weight: bold;
    }

}
</style>